<template>
	<view class="classification">
		<view class="topBox">
			<view class="adImage">
				<image src="http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d69c17f.jpg" mode="aspectFill"></image>
			</view>
			
			<view class="tabs" v-if="tabShow">
				<u-tabs :list="tabList" :current="current" active-color="#fe0000" @change="tabChange"></u-tabs>
			</view>
		</view>
		
		<view class="goodsList" :style="tabShow ? 'padding-top: 280rpx' : 'padding-top: 200rpx'">
			<view class="item flex_space_b" v-for="(item, index) in goods_list" :key="index" @click="goDetails()">
				<view class="imageBox">
					<u-image width="200rpx" height="200rpx" border-radius="12" src="http://xcx.tfxiaochengxu.com/2021-01-07_5ff5f3d67dd46.jpg"></u-image>
					<view class="mask flex_conter_c">
						<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="info flex_conter_c">
					<view class="flex1 goodsInfoBox">
						<view class="title u-line-2">品牌团仅16.9【谜草集】牛奶沐浴露800ml【限量5单】</view>
						<view class="data">
							<view class="flex">
								<view class="price">￥<text>16.90</text></view>
								<view class="original">￥79.00</view>
							</view>
							<view class="bottoBox">
								<view class="group">5人团</view>
								<view class="subsidy">最高补贴:<text>￥5.56</text></view>
							</view>
							<view class="car flex_conter_c">
								<u-icon name="gouwuche" custom-prefix="custom-icon" size="28" color="#fe0000"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				tabShow: true,
				goods_list: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
				tabList: [{
					name: '热门'
				}, {
					name: '购物'
				}, {
					name: '美食'
				}, {
					name: '生活'
				}, {
					name: '充值'
				}, {
					name: '大牌'
				}, {
					name: '数码'
				}, {
					name: '大牌'
				}, {
					name: '数码'
				}],
				current: 0,
			}
		},
		methods: {
			tabChange (index) {
				this.current = index
			},
			goDetails(idx) {
				uni.navigateTo({
					url: '/pages/index/goodsDetails?goods_id=' + 195
				})
			}
		},
		onLoad (options){
			uni.setNavigationBarTitle({
				title: options.navigationName
			})
		}
	}
</script>

<style scoped lang="scss">
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5;
	width: 750rpx;
	.adImage {
		width: 750rpx;
		height: 200rpx;
		image {
			width: 750rpx;
			height: 200rpx;
		}
	}
	.tabs {
		width: 750rpx;
		background-color: #FFFFFF;
	}
}

.goodsList {
	width: 750rpx;
	box-sizing: border-box;
	padding: 0 32rpx;
	.item {
		border-radius: 12rpx;
		overflow: hidden;
		.imageBox {
			position: relative;
			overflow: hidden;
			border-radius: 12rpx;
		}
		.info {
			flex: 1;
			padding: 40rpx 20rpx;
			border-bottom: 1rpx solid #EEEEEE;
			height: 260rpx;
			.goodsInfoBox {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				height: 100%;
			}
			.title {
				color: #333333;
				font-size: 30rpx;
				font-weight: 600;
			}
			.data {
				margin-top: 8rpx;
				position: relative;
				.flex {
					display: flex;
					align-items: flex-end;
					.price {
						color: var(--primaryColor);
						font-size: 24rpx;
						margin-right: 20rpx;
						font-weight: 600;
						text {
							font-size: 32rpx;
						}
					}
					.original {
						color: #666;
						font-size: 24rpx;
						text-decoration: line-through;
					}
				}
				.ratio {
					color: #666;
					font-size: 24rpx;
					margin-top: 8rpx;
					text:first-of-type {
						margin-right: 28rpx;
					}
				}
				.bottoBox {
					margin-top: 8rpx;
					.subsidy {
						display: inline-block;
						font-size: 22rpx;
						margin-left: 16rpx;
						text{
							color: var(--primaryColor);
						}
					}
					.group {
						display: inline-block;
						font-size: 20rpx;
						color: var(--primaryColor);
						// background-color: var(--primaryColor);
						border: 1rpx solid var(--primaryColor);
						border-radius: 8rpx;
						padding: 0 4rpx;
					}
				}
				.btn {
					background: var(--btnBgColor);
					position: absolute;
					bottom: 0;
					right: 0;
					border-radius: 40rpx;
				}
				.car {
					position: absolute;
					bottom: 0;
					right: 0;
					width: 48rpx;
					height: 48rpx;
					border-radius: 40rpx;
					background: #ffe5e5;
				}
			}
		}
	}
}
</style>
